<template>
	<!-- 
	服务器返回空列表后，我返回顶部想重新刷新数据，但是没有反应，拉不了
	 -->
	<z-paging
	 :auto-clean-list-when-reload="false"
	auto-show-back-to-top
	  	 loading-more-loading-text="加载中..."
		  ref="paging"
		   v-model="orders"
		   @query="queryList">
		   <template #top>
			   <NavBar></NavBar>
				<view  class="search-dropdown">
					<u-search @custom="getOrderListFn" @search="getOrderListFn" placeholder="ID" v-model="keyword"></u-search>
					<u-dropdown >
						<u-dropdown-item @change="getOrderListFn" v-model="status_value" title="状态" :options="status_options"></u-dropdown-item>
					</u-dropdown>
				</view>
			</template>
				 <template #bottom>
	<TabBar slot="bottom"></TabBar>
	 </template>
			
			<OrderList :StatusValue="status_value" @refreshOrders="getOrderListFn" :orders="orders"></OrderList>

	</z-paging>
 <u-loading-popup v-model="loading_popup_show" mode="flower" text="加载中..." />
	<NewVersion @close="closeNewVersion" :versionCreatedAt="versionCreatedAt" :currentVersion="new_currentVersion" :latestVersion="new_latestVersion" :updateDescription="new_updateDescription" :visible="newVersionVisible"></NewVersion>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import { onLoad,  onShow } from '@dcloudio/uni-app'

	import { getOrderList, getLatestVersion } from '@/static/apis/wzry'
	import { getVersion } from '@/static/js/hub'
	let orders = ref([])
	let status_value = ref(1)
	let keyword = ref('')
	const paging = ref(null)
	const loading_popup_show = ref(false)
	const newVersionVisible = ref(false)
	// 当前版本
	const new_currentVersion = ref("1.0.0")
	const new_latestVersion = ref("1.0.0")
	const new_updateDescription = ref("")
	const versionCreatedAt = ref("")

	// 定义选项数据
	const status_options = ref([
		{
			label: '待接手',
			value: 1,
		},
				{
			label: '代练中',
			value: 2,
		},
				{
			label: '已完成',
			value: 3,
		},
				{
			label: '已取消',
			value: 4,
		},
		{
			label: '处理中',
			value: 5,
		},
		{
			label: '已失败',
			value: 6,
		},
	])

	
	// 获取订单列表
	async function getOrderListFn() {
		if(paging.value) {
			paging.value.reload()
		}
	}
	onLoad(() => {
		// 隐藏tabbar
		uni.hideTabBar()
		
	})
	onMounted(async () => {
		await checkLatestVersion()
	})
	// 页面显示时刷新数据
	onShow(async () => {
		await getOrderListFn()
	})

	async function queryList(pageNo, pageSize) {
		loading_popup_show.value = true
		getOrderList({
			status: status_value.value,
			order_source_id: keyword.value,
			page: pageNo,
			page_size: pageSize,
		}).then(res => {
		
			paging.value.complete(res.data);
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon:"none"
			})
			if (err.message.includes("用户ID不能为空")) {
				setTimeout(() => {
					uni.redirectTo({
						url: "/pages/login/login"
					})
				}, 1000)
			}
			
		}).finally(() => {
			loading_popup_show.value = false
		})
	}


	// 关闭新版本弹窗
	function closeNewVersion() {
		newVersionVisible.value = false
	}

	// 检查是否有新版本
	 async function checkLatestVersion() {
		const latestVersion =  await getLatestVersion();
		const currentVersion = await getVersion();
		if (latestVersion.data.version != currentVersion) {
			new_currentVersion.value = currentVersion
			new_latestVersion.value = latestVersion.data.version
			new_updateDescription.value = latestVersion.data.version_desc
			versionCreatedAt.value = latestVersion.data.create_time
			newVersionVisible.value = true
			
		}
		
	}
</script>

<style scoped lang="scss">
	.page-content {
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); /* TabBar高度+安全区域高度 */
	}
	.search-dropdown {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding: 10rpx;
	}
</style>